<template>
    <div class="leftBottom">
        <box width="325px" height="372px" left="0" top="0" title="端口分布">
            <div class="wrap">
                <div class="chart" ref="chart-1"></div>
                <p class="title">端口-触点分布</p>
                <div class="info">
                    <p class="value">{{ value }}</p>
                    <p class="label">{{ label }}</p>
                </div>
            </div>
        </box>
        <box width="358px" height="372px" left="346px" top="0" title="评价表现">
            <div class="chart" ref="chart-2"></div>
        </box>
    </div>
</template>

<script>
export default {
    props: {
        leftBottomData1: {},
        leftBottomData2: {},
    },
    components: {},
    data() {
        return {
            value: "",
            label: "",
        };
    },
    watch: {
        leftBottomData1(newVal) {
            this.circleChartInit(newVal);
        },
        leftBottomData2(newVal) {
            this.chartInit(newVal);
        },
    },
    methods: {

      circleChartInit(data) {
        let _chart = this.$echarts.init(this.$refs['chart-1'])
        let _options = {
          grid: {
            top: '40',
            right: '5',
            left: '40',
            bottom: '30', //图表尺寸大小
          },
          legend: {
            show:false,
            textStyle: {
              color: '#8fadcc',
              fontSize: 12,
            },
            itemWidth: 8,
            itemHeight: 4,

            right: 0,
            top: 10,
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            color: '#59588D',
            data: data.map((item)=>item.name),
            axisLabel: {

              color: '#8fadcc',
              textStyle: {
                fontSize:9,
              },
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#3e5388',
              },

            },
            axisTick: {
              show: true,
              inside:true
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: [
            {
              name:"数量",
              nameTextStyle: {
                fontSize:12,
                color: '#ffffff',
                padding: [0, 0, -10, 50]
              },
              axisLabel: {
                color: '#8fadcc',
                textStyle: {
                  fontSize: 10,
                },
                formatter: '{value}',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#3e5388',
                },
                symbol:['none','arrow'],
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              splitArea: {
                show: true, // 是否显示分隔区域
                interval: 4, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
                areaStyle: {
                  // color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
                  color: ['rgba(3,23,69,1)','rgba(242,248,255,0)'],
                  opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
                },
              }
            },
          ],
          series: [
            {
              type: 'bar',
              name: '',
              data: data.map((item)=>item.value),
              barWidth: '16',
              barGap: '80%',
              label: {
                show: true,
                position: 'top',
                color:"#00ffff"
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: 'rgba(51,185,255,1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(12,29,100,1)',
                        },
                      ]
                  ),
                },
              },
            },
            {
              //分隔
              type: 'pictorialBar',
              itemStyle: {
                color: '#00143f',
              },
              symbolRepeat: 'fixed',
              symbolMargin: 2,
              symbol: 'roundRect',
              symbolClip: true,
              symbolSize: [20, 1],
              symbolPosition: 'start',

              data: data.map((item)=>item.value),
              z: 10,
              animationEasing: 'elasticOut',
            },

          ],
        }
        _chart.setOption(_options)
      },

        circleChartInit3(data) {

        let _chart = this.$echarts.init(this.$refs["chart-1"],'');
        const myShape = {
          x: 0,
          y: 0,
          width: 13, //间距
        };
        const color = [
          ["#397790","#355a6c"],
          ["#489882","#254f42"],
          ["#e29f46","#7c5320"],
          ["#c24f3e","#65281e"],
          ["#534865","#2c2533"],
          ["#b3619e","#531141"],
          ["#5178cb","#2d50b1"],
        ]
// 绘制左侧面
        const width  = 25
        const InclinedRoofBarLeft = this.$echarts.graphic.extendShape({
          shape: myShape,
          buildPath: function (ctx, shape) {

            // canvas，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];

            const c2 = [xAxisPoint[0] - width, xAxisPoint[1]];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            // console.log(c0,'c0',c1,'c1',c2,'c2',c3,'c3');
            ctx.fillStyle="#ff0";
            ctx.moveTo(c0[0], c0[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
          },
        });
        const InclinedRoofBarRight = this.$echarts.graphic.extendShape({
          shape: myShape,
          buildPath: function (ctx, shape) {
            // console.log(ctx);
            // canvas，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];

            const c22 = [xAxisPoint[0] + width, xAxisPoint[1]];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            // console.log(c0,'c0',c1,'c1',c2,'c2',c3,'c3');
            ctx.fillStyle="#ff0";
            ctx.moveTo(c0[0], c0[1]).lineTo(c22[0], c22[1]).lineTo(c3[0], c3[1]).closePath();
            // ctx.drawImage(labelImages[0], c0[0],c0[1]);
          },
        });
        this.$echarts.graphic.registerShape('InclinedRoofBarLeft', InclinedRoofBarLeft);
        this.$echarts.graphic.registerShape('InclinedRoofBarRight', InclinedRoofBarRight);

        const seriesData = data

        const labelImage = [
            '',
            '',
            '',
            '',
            '',
            '',
            '',
        ]




          const option = {
          // backgroundColor: "#1e3756",
          color: ['#b27e44'],
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            confine: true,
            textStyle: {
              fontSize: 14,
            },
            formatter: (params) => {
              var tar = params[0];
              this.workType = tar.name;
              return tar.name + ' : ' + '<br/>' + tar.value;
            },
          },
          legend: {
            show:false,
            top: 5,
            itemWidth: 16,
            itemHeight: 8,
            left: 'center',
            padding: 0,
            textStyle: {
              color: '#fff',
              fontSize: 14,
              padding: [2, 0, 0, 0],
            },
            data: ['demo'],
          },
          grid: {
            // top: 40,
            // bottom: 10,
            // left: 20,
            // right: 20,
            containLabel: true,

            left: 0,
            bottom: 10,
            width: '95%',
            height: '85%',
          },
          xAxis: [
            {
              type: 'category',
              axisLine: {
                show: false,
              },

              axisLabel: {
                show: true,
                interval: 0,
                padding:[0,0,0,15],
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgb(255, 255, 255, 0.3)',
                  type: 'dashed',
                  width: 1,
                },
              },
              axisTick: {
                show: false,
              },
              data:seriesData.map((item) => item.name),
              zlevel: 10,
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max:Math.max(...seriesData.map((item) => item.value))+200,
              axisTick: {
                show: false,
              },
              axisLabel: {
                show:false,
                textStyle: {
                  color: '#fff',
                  fontSize: 12,
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: 'rgb(255, 255, 255, 0.3)',
                  type: 'dashed',
                  width: 0.7,
                },
              },
              axisLine: {
                show: false,
                lineStyle: {

                },
              },
              nameTextStyle: {
                color: '#fff',
                fontSize: 16,
              },
            },
          ],
          series: [
            {
              type: 'bar',
              z:1,
              label: {
                show: true,
                position: 'top',
                distance:13,
                offset:[10,0],
                lineHeight: 18,// 行高

                formatter: (params) => {
                  console.log(params);
                  // a,b为rich属性中定义的样式名，相当于css中的class
                  const arr = [
                    `{a${params.dataIndex}|${params.value}}`,


                  ]
                  return arr.join('\n') // 数组转成字符串并换行
                },
                rich: {
                  a0: {
                    backgroundColor: {
                      image: labelImage[0] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a1: {
                    backgroundColor: {
                      image: labelImage[1] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a2: {
                    backgroundColor: {
                      image: labelImage[2] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a3: {
                    backgroundColor: {
                      image: labelImage[3] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a4: {
                    backgroundColor: {
                      image: labelImage[4] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a5: {
                    backgroundColor: {
                      image: labelImage[5] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                  a6: {
                    backgroundColor: {
                      image: labelImage[6] //注意路径带不带/
                    },
                    color: "#000",
                    height: 40,
                    width: 35,
                    align: 'center',
                    fontSize:12,
                    fontWeight:"bold"
                  },
                }
              },

              showBackground: false,
              barWidth: 14,
              itemStyle: {
                color: 'transparent',
              },
              tooltip: {
                show: false,
              },
              data: seriesData.map((item) => item.value),
            },

            {
              z:2,
              type: 'custom',
              name: '锥',
              itemStyle: {
                borderColor: '#b27e44',
                borderWidth: 1,
                color: '#b27e44',
                normal: {
                  borderWidth: 1,
                },
              },
              renderItem: (params, api) => {

                //柱形图的顶部的坐标 以左上角为坐标
                const location = api.coord([api.value(0), api.value(1)]);
                //柱形图的底部的坐标 以左上角为坐标
                const xlocation = api.coord([api.value(0), 0]);
                // console.log(location,'顶部坐标',xlocation,'底部坐标');
                return {
                  type: 'group',
                  zlevle:2,
                  z:2,
                  children: [
                    {
                      type: 'InclinedRoofBarLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0] + 10,
                        y: location[1],
                        xAxisPoint: [xlocation[0] + 10, xlocation[1]],
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: color[params.dataIndex][0]
                        },
                          {
                            offset: 1,
                            color: color[params.dataIndex][0]
                          }
                        ])
                      }
                    },
                    {
                      type: 'InclinedRoofBarRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0] + 10,
                        y: location[1],
                        xAxisPoint: [xlocation[0] + 10, xlocation[1]],
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: color[params.dataIndex][1]
                        },
                          {
                            offset: 1,
                            color: color[params.dataIndex][1]
                          }
                        ])
                      }
                    },
                  ]

                };
              },
              data: seriesData.map((item) => item.value),
              encode:{
                Gap:100
              },
            },
          ],
        };




        _chart.setOption(option);
      },
        circleChartInit2(data) {
            let _chart = this.$echarts.init(this.$refs["chart-1"]);
            let _option = {
                tooltip: {},
                color: [
                    "#aa33ff",
                    "#45993d",
                    "#1ab2ff",
                    "#00bf8f",
                    "#0080ff",
                    "#3344ff",
                    "#6a4cff",
                ],

                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["40%", "50%"],
                        center: ["50%", "48%"],

                        label: {
                            formatter: "{b} {c}",
                            fontSize: 14,
                            color: "#fff",
                        },
                        labelLine: {
                            length: 10,
                            length2: 10,
                        },
                        data: data,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0, 16, 64, 0.3)",
                                borderWidth: 3,
                            },
                        },
                    },
                ],
            };
            _chart.setOption(_option);
            _chart.on("mouseover", (params) => {
                this.value = params.value;
                this.label = params.name;
            });
        },
        chartInit(data) {
            let _chart = this.$echarts.init(this.$refs["chart-2"]);
            let _option = {
                grid: {
                    bottom: 40,
                    top: 50,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                legend: {
                    top: 0,

                    data: [
                        {
                            name: "违规数",
                            icon: "rect",
                            textStyle: { color: "#8fadcc" },
                        } ,
                        {
                            name: "未闭环",
                            icon: "rect",
                            textStyle: { color: "#8fadcc" },
                        },
                        {
                            name: "闭环率",
                            textStyle: { color: "#8fadcc" },
                        },
                    ],
                },
                xAxis: [
                    {
                        type: "category",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: "#8fadcc",
                            },
                            interval: 0,
                            formatter: (value) => {
                                var ret = ""; //拼接加\n返回的类目项
                                var maxLength = 5; //每项显示文字个数
                                var valLength = value.length; //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) {
                                    //如果类目项的文字大于3,
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ""; //每次截取的字符串
                                        var start = i * maxLength; //开始截取的位置
                                        var end = start + maxLength; //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp =
                                            value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                        },
                        splitLine: {
                            show: false,
                        },

                        data: data.map((item) => item.name),
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "数量",
                        nameTextStyle: {
                            padding: [0, 0, -10, 10],
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 8,
                                color: "#8fadcc",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                    {
                        type: "value",
                        name: "%",
                        nameTextStyle: {
                            padding: [0, 10, -10, 0],
                        },
                        position: "right",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisLabel: {
                            margin: 10,

                            textStyle: {
                                fontSize: 14,
                                color: "#8fadcc",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        max: 100,
                    },
                ],
                series: [
                    {
                        name: "违规数",
                        type: "bar",
                        barWidth: "8px",
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#cc555f", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#cc2630", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                                barBorderRadius: [4, 4, 0, 0],
                            },
                        },
                        data: data.map((item) => item.data1),
                    },
                    {
                        name: "未闭环",
                        type: "bar",
                        barWidth: "8px",
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#1592da", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#0369db", // 100% 处的颜色
                                        },
                                    ],
                                    globalCoord: false, // 缺省为 false
                                },
                                barBorderRadius: [4, 4, 0, 0],
                            },
                        },
                        data: data.map((item) => item.data3),
                    },
                    {
                        name: "闭环率",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        symbol: "circle", //标记的图形为实心圆
                        showSymbol: false,
                        symbolSize: 8, //标记的大小
                        itemStyle: {
                            normal: {
                                color: "#ffd400",
                                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
                                borderWidth: 5,
                            },
                        },
                        lineStyle: {
                            color: "#ffd400",
                        },

                        data: data.map((item) => item.percent),
                    },
                ],
            };
            _chart.setOption(_option);
        },
    },
    created() {},
    mounted() {},
};
</script>
<style lang='less' scoped>
.leftBottom {
    width: 703px;
    height: 372px;
    position: absolute;
    left: 59px;
    top: 600px;
    .wrap {
        position: relative;
        width: 100%;
        height: 100%;
        .title {
            position: absolute;
            bottom: -14px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            width: 100%;
        }
        .info {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .value {
                color: #1ab2ff;
                font-size: 34px;
            }
            .label {
                font-size: 14px;
                margin-top: 6px;
            }
        }
    }
    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>
